import React, { useState } from 'react'
import { ResultPage, Button } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { LoopOutline } from 'antd-mobile-icons'
import styles from './home.module.css'
import dayjs from 'dayjs'

function Index() {
  let navigate = useNavigate()

  const { start, end } = useSelector((state) => state.CityReducer)
  const date=dayjs().format('YYYY-MM-DD')
  const [isSpeed,setIsSpeed]=useState(false)

  const handellist=()=>{
    navigate(`/list?start=${start}&end=${end}&date=${date}&isSpeed=${isSpeed}`)
  }
  return (
    <div>
      <ResultPage
        status=''
        title='车票选购'
        description='便捷购票'
      >
        <ResultPage.Card style={{ padding: 8 }}>
          <div className={styles.cs}>
            <span>{start}</span>
            <span><LoopOutline /></span>
            <span>{end}</span>
          </div>
          <p>{date}</p>
          <div>
            <Button block color='success' size='large' onClick={()=>handellist()}>
              查询
            </Button>
          </div>
        </ResultPage.Card>

      </ResultPage>
    </div>
  )
}

export default Index
